<template>
  <!-- 催收执行页-历史信息模块-外访附件 -->
  <section class="component visit-annex">
    <!-- 搜索区域 -->
    <data-form :model="model">
      <template slot="inputs">
        <el-form-item label="上传人" prop="uploader">
          <el-input
            clearable
            placeholder="上传人"
            v-model.trim="model.uploader"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传时间">
          <el-date-picker
            end-placeholder="结束日期"
            range-separator="至"
            start-placeholder="开始日期"
            type="datetimerange"
            v-model="model.uploadTime"
          ></el-date-picker>
        </el-form-item>
      </template>
    </data-form>
    <!-- 数据列区域 -->
    <data-box
      :data="dataSet"
      :height="200"
      :page="pageService"
      @onPageChange="refreshData"
    >
      <template slot="columns">
        <el-table-column
          :min-width="$helper.getColumnWidth(4)"
          label="行动流水"
          prop="liushui"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(3)"
          label="上传人"
          prop="shangchuanren"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(4)"
          label="上传时间"
          prop="shangchuanshijian"
        ></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="操作">
          <template slot-scope="scope">
            <el-button type="text">试听</el-button>
            <el-button type="text">下载</el-button>
            <el-button type="text">查看附件</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop } from "vue-property-decorator";

import { PageService } from "~/utils/page.service";
import { namespace } from "vuex-class";

const CollectionExecutionModule = namespace("collection-execution");
@Component({
  components: {}
})
export default class VisitAnnex extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @CollectionExecutionModule.State private caseId;

  private model: any = {
    uploader: "",
    uploadTime: []
  };
  private dataSet: any[] = [];

  private refreshData() {}
}
</script>

<style lang="less" scoped></style>
